<template>
    <van-form
        class="query-container"
        ref="manufacturecode">
        <van-cell-group
            inset
            :style="{marginTop:'20px'}">
            <van-field
                center
                input-align="center"
                error-message-align="center"
                class="manucode"
                v-model="query_state.manufacturecode"
                :placeholder="$st('wp_Please_enter_the_equipments_factory_number')"
                :rules="[{ required: true, message: $st('wp_Please_enter_the_equipments_factory_number_CORRECTLY') }]" />
            <van-button
                class="codebtn"
                @click="scanQrcode"
                icon="scan">
                {{$st('wp_Scan_Repair_Code_To_Iden')}}
            </van-button>

        </van-cell-group>

        <van-button
            class="querybtn"
            round
            size="normal"
            type="primary"
            @click="clickSubmitQuery">
            {{$st('Search')}}
        </van-button>
    </van-form>
</template>
<script>
import { useRepairOrderQuerySetup, useRepairOrderQueryListSetup } from '@/setup/repair/RepairReortQuerySetup.js';
import { onMounted } from '@vue/runtime-core';
import { useRoute } from 'vue-router';
import { showError } from '@/util/MessageDeal.js';
import { selfI18n } from '@/i18n';
export default {
    setup () {
        const {
            getVercodeForRepair,
            query_state,
            setQueryCookies,
            scanManufacturecode
        } = useRepairOrderQuerySetup();
        const { getRepairDataByManucode } = useRepairOrderQueryListSetup();
        const scanQrcode = () => {
            scanManufacturecode((res) => {
                console.log(res);
                if (!res) {
                    showError(selfI18n('wp_Please_scan_QRcode_of_device_vendorpwd_device'));
                }
            });
        };
        const route = useRoute();
        onMounted(() => {
            if (route.query.manufacturecode) {
                query_state.manufacturecode = route.query.manufacturecode;
            }
        });
        return {
            query_state,
            scanManufacturecode,
            setQueryCookies,
            getVercodeForRepair,
            getRepairDataByManucode,
            scanQrcode
        };
    },
    methods: {
        async clickSubmitQuery () {
            try {
                await this.$refs.manufacturecode.validate();
                this.setQueryCookies('manucode', this.query_state.manufacturecode);

                const params = {
                    administrator: '',
                    company: '',
                    content: '',
                    manufacturecode: this.query_state.manufacturecode,
                    n: 20,
                    name: '',
                    p: 1,
                    phone: '',
                    repairid: '',
                    createtime: '',
                    repairtimeend: '',
                    repairtimestart: '',
                    status: 'all',
                    username: '',
                    vercode: ''
                };
                this.getRepairDataByManucode(params, () => {
                    this.$router.push({
                        path: '/repairorderquerylist'
                    });
                });
            } catch (error) {
                console.log(error);
            }
        }
    }
};

</script>
<style lang="scss" scoped>
     .query-container {

        text-align: center;
        height: calc(100vh - 65px);
    }

    .code-input-group {
        margin-top: 20px;
        height: 130px;
    }

    .querybtn {
        margin-top: 30px;
        height: 35px;
        width: 180px;
        vertical-align: middle;
    }
.manucode{
        height: 60px;
        font-size: 17px;
}
    .codebtn {
        color: #1890ff;
        width: 100%;
        border: 0 solid white;
        height: 50px;
        font-size: 15px;
    }

</style>
